<template>
  <div class="homeBG" >
    <div class="title">
      <div class="title-div">
        <img src="../../assets/logo/logo.png" style="width: 64px;height: 64px;margin-right: 10px" alt="">
        云杉科技系统管理界面
      </div>

    </div>
    <div class="neirong">
      <div class="neirong-kuai" @click="mokuaiBtn(item)" v-for="item in list">
        <div class="div-img">
          <img :src="item.img" alt="">
          <div class="div-wenzi">
            {{item.title}}
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: 'Index',
    components: {

    },
    created() {
    // this.getdata()
    },
    data() {
      return {
        list:[
          {id:'1109',img:'http://img.mp.sohu.com/upload/20180702/c52d22153f6b4f468fad87358c6e79c1.jpg', title:'设备'},
          {id:'1110',img:'http://img.mp.sohu.com/upload/20180702/c52d22153f6b4f468fad87358c6e79c1.jpg', title:'物资'},
          {id:'1111',img:'http://img.mp.sohu.com/upload/20180702/c52d22153f6b4f468fad87358c6e79c1.jpg', title:'系统'},
        ],
      }
    },
    methods: {
      getdata:function(){
        console.log('进入')
        request({
          url: '/getBaseRouters',
          method: 'get'
        }).then(response => {
          for(var i=0;i<response.data.length;i++){
            response.data[i].img = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590055712136&di=8e4caaa653fae168efec0389b4acdb28&imgtype=0&src=http%3A%2F%2Fimg.qdaily.com%2Farticle%2Farticle_show%2F20181220233811v24XNkSw5GZceVCM.jpg%3FimageMogr2%2Fauto-orient%2Fthumbnail%2F%2521755x450r%2Fgravity%2FCenter%2Fcrop%2F755x450%2Fquality%2F85%2Fformat%2Fjpg%2Fignore-error%2F1'
          }

          this.list = response.data
          console.log('成功',this.list)

        });

      },
      //模块点击
      mokuaiBtn:function (row) {
        console.log('点击',row.id)
        this.$store.state.permission.routesid=row.id
        this.$router.push({ path: "/index" });

      },

    }
  }
</script>

<style lang="scss" scoped>
  .homeBG {
    height: 100%;
    width: 100%;
    background: url("../../assets/logo/imgbj.jpg") no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
  }
  .title {
    position: absolute;
    left: 36%;
   height: 64px;
    margin-top: 50px;
  }
  .title-div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: white;
  }
  .neirong {
    position: relative;
    left: 50%;
    top: 50%;
    width: 80%;
    height: auto;
    transform:translate(-50%,-50%);
    color: #fff;
    font-size: 20px; line-height: 35px;
    display: flex;
    justify-content: center;
    flex-wrap:nowrap;

  }
  .neirong-kuai {
    width: 250px;
    height: 350px;
    background: rgba(102,102,102,0.5);
    margin-left: 20px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 10px 10px 20px
  }
  .div-img {
    width: 70%;
    margin-left: 15%;
    margin-top: 60px;
  }
  .div-img img {
    width: 100%;
    height: 160px;
  }
  .div-wenzi {
    text-align: center;
    font-size: 20px;
  }
</style>
